import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { ResidentSingerWrapper } from './style'
import SectionHeaderV2 from '@/components/section-header-v2'
import { useAppSelector, shallowEqualApp } from '@/store'
import { getImageSize } from '@/utils/HandlerImg.ts'

interface IProps {
  children?: ReactNode
}

const ResidentSinger: React.FC<IProps> = () => {
  const { artistList } = useAppSelector(
    (state) => ({
      artistList: state.recommend.artistList
    }),
    shallowEqualApp
  )

  return (
    <ResidentSingerWrapper>
      <SectionHeaderV2
        title="入驻歌手"
        more="查看全部"
        morePath="#/discover/artist"
      ></SectionHeaderV2>
      <div className="singer-list">
        {artistList.map((item) => {
          return (
            <a className="item" href="" key={item.id}>

              <img src={getImageSize(item.img1v1Url, 62)} alt="" />
              <div className="info">
                <div className='singer'>{item.name}</div>
                <div className='desc'>粉丝：{item.fansCount}</div>
              </div>
            </a>
          )
        })}
      </div>

      <div className="apply-for">
        <a href="/#">申请成为网易音乐人</a>
      </div>
    </ResidentSingerWrapper>
  )
}

export default memo(ResidentSinger)
